<template>
    <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout">
        <a-form-model-item label="样式选择">
            <a-radio-group v-model="form.layout">
                <a-radio-button value="horizontal"> 水平 </a-radio-button>
                <a-radio-button value="vertical"> 垂直 </a-radio-button>
                <a-radio-button value="inline"> 排列 </a-radio-button>
              </a-radio-group
      >
          </a-form-model-item
    >
        <a-form-model-item label="用户名">
            <a-input v-model="form.username" placeholder="请输入用户名" />
          </a-form-model-item
    >

        <a-form-model-item label="密码">
            <a-input v-model="form.password" placeholder="请输入密码" />
          </a-form-model-item
    >

        <a-form-model-item label="真实姓名">
            <a-input v-model="form.realname" placeholder="请输入真实姓名" />
          </a-form-model-item
    >

        <a-form-model-item label="身份证号">
            <a-input v-model="form.identity" placeholder="请输入身份证号" />
          </a-form-model-item
    >

        <a-form-model-item label="家庭住址">
            <a-input v-model="form.address" placeholder="请输入家庭地址" />
          </a-form-model-item
    >

        <a-form-model-item label="电话号码">
            <a-input v-model="form.phone" placeholder="请输入电话号码" />
          </a-form-model-item
    >


        <a-form-model-item :wrapper-col="buttonItemLayout.wrapperCol">
            <a-button type="primary" @click="register"> 点咱注册 </a-button>
          </a-form-model-item
    >
      </a-form-model
  >
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        layout: "horizontal",
        username: "",
        password: "",
        realname: "",
        identity: "",
        address: "",
        phone: "",
      },
    };
  },
  methods: {
    // 注册接口
    register() {
      axios({
        url: "http://127.0.0.1:8000/my/register/",
        method: "post",
        data: {
          username: this.form.username,
          password: this.form.password,
          realname: this.form.realname,
          identity: this.form.identity,
          address: this.form.address,
          phone: this.form.phone,
        },
      }).then((resp) => {
        console.log(resp.data);
        alert(resp.data.msg);
      });
    },
  },
  computed: {
    formItemLayout() {
      const { layout } = this.form;
      return layout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { layout } = this.form;
      return layout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
};
</script>